<template>
	<view class="edit-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="search.title">
			</c-navigation-bar>
			<view class="container-box">
				<view class="input-box">
					<view class="input-item">
						<titleInput class="input-box" :rule="'/[\W]/g'" valKey="email " v-model="bindData.email "
							:title="$t('storeManagement.MailBox')"></titleInput>
						<titleInput class="input-box" :rule="'[^\\w@.]'" :maxlength="6" valKey="captcha" type="number"
							v-model="bindData.emailSmsCode" :title="$t('login.reigsterInputList[4].val')">
							<view class="" slot="right-icon">
								<u-verification-code :seconds="seconds" ref="uCode3" changeText="xs"
									:start-text="$t('login.loginOther.send')" :end-text="$t('login.loginOther.regain')"
									@change="codeChange"></u-verification-code>
								<u-button @tap="getCode3" style="color: #2934d0">{{ tips }}</u-button>
							</view>
						</titleInput>
					</view>
				</view>
			</view>
			<u-button :loading="isloading" slot="footer" class="footer" type="primary"
				@click="save">{{$t('login.BindMail')}}</u-button>
		</c-layout>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				//搜索
				search: {
					navType: 'navBackTitle',
					title: this.$t('login.BindMail')
				},
				bindData: {
				email: '',
				emailSmsCode: '',
				},
				phoneAreaNumber: 1,
				// 验证码
				tips: '',
				// refCode: null,
				seconds: 60,


			};
		},
		onLoad() {


		},

		methods: {
			asss(e) {
				this.phoneAreaNumber = Number(e);
			},


			confirmArea(e) {
				this.phoneAreaNumber = e[0].value;
			},
			//获取国际区号
			getAreaCode() {
				this.$u.get('/app/user/getInternationalTelephoneAreaCode').then((res) => {
					console.log('quhao', res);
					this.countries = res.data

				});
			},
			// 验证码
			codeChange(text) {
				this.tips = text;
			},
		getCode3() {
		
			if (this.$refs.uCode3.canGetCode) {
				uni.showLoading({
					title: this.$t('storeManagement.verification')
				});
				this.$u.post(`/app/user/sendMail/${this.bindData.email}`)
					.then((res) => {
						console.log(res.data);
						// this.registerData.cmsCode=res.data
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast(this.$t('storeManagement.verificationSent'));
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode3.start();
					}).catch(e => {
						uni.hideLoading();
					});
			} else {
				this.$u.toast(this.$t('storeManagement.countdownOver'));
			}
		},
			save() {
				this.isloading = true
				if (typeof this.phoneAreaNumber !== 'number') {
					this.$u.toast(this.$t('storeManagement.selectNumber'));
					return

				}
				this.$u.post('/app/user/userBindingMail', {
						"username": this.vuex_user_info.userName,
						"email": this.bindData.email,
						"emailCode": this.bindData.emailSmsCode
				
					})
					.then((res) => {
						this.isloading = false
						this.$u.toast(res.msg)
						this.$u.init.getUserInfo()
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit'
							})
						},1000)
					}).catch(err => {
					this.isloading = false
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.edit-container {
		font-family: PingFang SC;
		position: relative;
		overflow: hidden;
		overflow-y: scroll;

		.container-box {
			display: flex;
			flex-direction: column;
			padding: 40rpx 40rpx 40rpx;

			.top {
				text-align: center;
				margin-bottom: 80rpx;

				uni-text {
					display: block;
					font-size: 36rpx;
					color: #000000;
				}
			}

			.input-box {
				.input-item {
					.title-input {
						margin-bottom: 24rpx;
					}
				}

				.right-icon {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.areaCodeBox {
			border: 1px solid #E8E6EA;
			padding: 42rpx 20rpx;
			border-radius: 30rpx;
			margin-right: 24rpx;
			text-align: center;
			position: relative;
			margin-bottom: 10px;

			.areaCodeText {
				font-family: SFUIDisplay-Regular, SFUIDisplay;
				position: absolute;
				top: -20rpx;
				left: 20rpx;
				font-size: 26rpx;
				color: #999cad;

				background-color: #fff;
				padding: 0 10rpx;
			}
		}

	}
</style>